<template>
    <!-- <topHeader :title="'售后首页'" :color="'#4a92ff'" :back="true"></topHeader> -->
    <view class="content">
        <view class="home_top">
            <image src="../../static/88888.png" mode="widthFix" class="image"></image>
            <view class="text">
                <text class="title">订单售后中心</text>
                <text class="title_one">实现企业流程精益管理</text>
            </view>
            <image src="../../static/home_1.png" mode="" class="image_one"></image>
        </view>
        <!-- 订单类型 -->
        <view class="box">
            <view class="input_box">
                <search></search>
            </view>

            <view class="all" @click="skipViewFn(0)">
                <view class="left">
                    <uni-icons custom-prefix="iconfont" type="icon-a-All-applicationquanbu" size="35"></uni-icons>
                </view>
                <view class="center">
                    <view>{{ indengtData.order_num }}</view>
                    <text>全部售后</text>
                </view>
                <view class="right">
                    <uni-icons custom-prefix="iconfont" type="icon-youjiantou" size="15"></uni-icons>
                </view>
            </view>
            <view class="all" @click="skipViewFn(3)">
                <view class="left">
                    <uni-icons custom-prefix="iconfont" type="icon-a-All-applicationquanbu1" size="35"></uni-icons>
                </view>
                <view class="center">
                    <view>{{ indengtData.order_dcl_num }}</view>
                    <text>待处理</text>
                </view>
                <view class="right">
                    <uni-icons custom-prefix="iconfont" type="icon-youjiantou" size="15"></uni-icons>
                </view>
            </view>
            <view class="all" @click="skipViewFn(4)">
                <view class="left">
                    <uni-icons custom-prefix="iconfont" type="icon-a-All-applicationquanbu2" size="35"></uni-icons>
                </view>
                <view class="center">
                    <view>{{ indengtData.order_clz_num }}</view>
                    <text>处理中</text>
                </view>
                <view class="right">
                    <uni-icons custom-prefix="iconfont" type="icon-youjiantou" size="15"></uni-icons>
                </view>
            </view>
            <view class="all" @click="skipViewFn(5)">
                <view class="left">
                    <uni-icons custom-prefix="iconfont" type="icon-a-All-applicationquanbu3" size="35"></uni-icons>
                </view>
                <view class="center">
                    <view>{{ indengtData.order_dsh_num }}</view>
                    <text>待审核</text>
                </view>
                <view class="right">
                    <uni-icons custom-prefix="iconfont" type="icon-youjiantou" size="15"></uni-icons>
                </view>
            </view>
            <view class="all" @click="skipViewFn(7)">
                <view class="left">
                    <uni-icons custom-prefix="iconfont" type="icon-a-All-applicationquanbu4" size="35"></uni-icons>
                </view>
                <view class="center">
                    <view>{{ indengtData.order_jf_num }}</view>
                    <text>纠纷</text>
                </view>
                <view class="right">
                    <uni-icons custom-prefix="iconfont" type="icon-youjiantou" size="15"></uni-icons>
                </view>
            </view>

            <view class="all" @click="skipViewFn(2)">
                <view class="left">
                    <uni-icons custom-prefix="iconfont" type="icon-jinji" size="35"></uni-icons>
                </view>
                <view class="center">
                    <view>{{ indengtData.order_urgent_num }}</view>
                    <text>紧急售后</text>
                </view>
                <view class="right">
                    <uni-icons custom-prefix="iconfont" type="icon-youjiantou" size="15"></uni-icons>
                </view>
            </view>
            <view class="all" @click="skipViewFn(6)">
                <view class="left">
                    <uni-icons custom-prefix="iconfont" type="icon-a-All-applicationquanbu5" size="35"></uni-icons>
                </view>
                <view class="center">
                    <view>{{ indengtData.order_finish_num }}</view>
                    <text>已完成</text>
                </view>
                <view class="right">
                    <uni-icons custom-prefix="iconfont" type="icon-youjiantou" size="15"></uni-icons>
                </view>
            </view>
            <view class="all" @click="skipViewFn(1)">
                <view class="left">
                    <uni-icons custom-prefix="iconfont" type="icon-shouqianzixun" size="35"></uni-icons>
                </view>
                <view class="center">
                    <view>{{ shouqianNum }}</view>
                    <text>售前咨询</text>
                </view>
                <view class="right">
                    <uni-icons custom-prefix="iconfont" type="icon-youjiantou" size="15"></uni-icons>
                </view>
            </view>
        </view>
        <!--  -->

        <!-- <view class="urgency" v-if="urgencyData.length">
            <view style="display: flex; justify-content: space-between" class="box_top">
                <uni-icons custom-prefix="iconfont" type="icon-a-fenqizhifuchaoshi1" size="15"></uni-icons>
                <view class="" style="margin-left: 10rpx; font-weight: 600">紧急订单</view>
            </view>
            <view class="item_indent" v-for="(item, index) in urgencyData" :key="index" @click="indentDetalFn(item.id)">
                <text class="one">订单编号</text>
                <view class="tow">
                    <view style="font-weight: 600">{{ item.order_no }}</view>
                    <view class="cen">
                        <text>{{ item.status_text }}</text>
                    </view>
                    <uni-icons custom-prefix="iconfont" type="icon-youjiantou" size="15"></uni-icons>
                </view>

                <view class="three">
                    <text class="item">
                        买家姓名：
                        <text>{{ item.name }}</text>
                    </text>
                    <text class="item">
                        售后类型：
                        <text>{{ item.question_type_text }}</text>
                    </text>
                </view>
            </view>
        </view> -->
        <view class="urgency"></view>
        <uni-popup ref="popup" background-color="#fff">
            <uni-popup-dialog
                cancelText="关闭"
                confirmText="同意"
                title="订阅消息"
                content="订阅消息通知,信息更新通知"
                @confirm="dialogConfirm"
                @close="dialogClose"
            ></uni-popup-dialog>
        </uni-popup>
    </view>
    <tarbar :currentTab="currentTab"></tarbar>
</template>

<script setup>
import topHeader from '@/pages/components/topHeader.vue';
import tarbar from '@/pages/components/tarbar.vue';
import search from '@/pages/components/search.vue';
import { indentGet, urgencyGet, wxBindApi, consultationApi } from '@/pages/request/loginApi.js';
import { nextTick, onMounted, ref } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import store from '@/store/index.js';
function skipViewFn(type) {
    uni.redirectTo({
        url: `/pages/index/index?type=${type}`
    });
}
const currentTab = ref(); // 当前选中的 tab
const fn = () => {
    const res = getCurrentPages();
    currentTab.value = res[res.length - 1].$page.fullPath;
};
const indengtData = ref({}); //订单数量
const urgencyData = ref([]);

async function onClickItem(e) {
    const res = await indentGet();
    indengtData.value = res.data;
    const urgency = await urgencyGet();
    urgencyData.value = urgency.data;
}

const lists = ref(['全部', '待处理', '处理中', '审核中', '已完成']);

function cutTitleFn(index) {}
function iconClick(type) {
    uni.showToast({
        title: `点击了${type === 'prefix' ? '左侧' : '右侧'}的图标`,
        icon: 'none'
    });
}
//
function indentDetalFn(id) {
    uni.navigateTo({
        url: `/pages/indentVIew/indentVIew?id=${id}`
    });
}
function loginWXbind() {
    uni.login({
        provider: 'weixin',
        onlyAuthorize: true, // 微信登录仅请求授权认证
        success: function (event) {
            console.log(event);
            const { code } = event;
            //客户端成功获取授权临时票据（code）,向业务服务器发起登录请求。
            wxBindApi({ code: event.code, token: uni.getStorageSync('newToken') });
        },
        fail: function (err) {
            // 登录授权失败
            // err.code是错误码
        }
    });
}
const agree = ref(false);
onLoad(() => {
    agree.value = store.state.agree;
    loginWXbind();
    onClickItem();
    if (!agree.value) {
        nextTick(() => {
            popup.value.open('center');
        });
    }
});
// 订阅】
function dialogClose() {
    // console.log('取消订阅');
}
function getTmplID() {
    uni.requestSubscribeMessage({
        tmplIds: ['6YQ3oH3AHXtkDUDES_2Jf0psD9VUe7PEs37wA0K8n0w'],
        success(res) {
            // console.log(res);
            uni.showToast({
                title: '订阅成功'
            });
        },
        fail() {
            uni.showToast({
                title: '订阅失败',
                icon: 'none'
            });
        }
    });
}
const popup = ref(null);
onMounted(() => {
    consultationFn();
    uni.getSetting({
        withSubscriptions: true,
        success(res) {
            // console.log(res);
            if (res.subscriptionsSetting && res.subscriptionsSetting.itemSettings) {
                let isSubscribed = res.subscriptionsSetting.itemSettings['6YQ3oH3AHXtkDUDES_2Jf0psD9VUe7PEs37wA0K8n0w'] === 'accept';
                if (isSubscribed) {
                    // 用户已订阅
                    return;
                } else {
                    // 用户未订阅或拒绝订阅
                }
                return;
            } else {
            }
        }
    });
});

function dialogConfirm() {
    store.state.agree = true;
    getTmplID();
}
//售前数量
const shouqianNum = ref(0);
async function consultationFn() {
    const res = await consultationApi();
    shouqianNum.value = res.data.length || 0;
}
</script>

<style scoped lang="scss">
@import 'uview-plus/index.scss';
.home_top {
    width: 100%;
    height: 508rpx;
    background-color: transparent;
    position: relative;
    .image {
        width: 100%;
    }
    .image_one {
        width: 300rpx;
        height: 300rpx;
        position: absolute;
        bottom: 86rpx;
        right: 40rpx;
        z-index: 99;
    }
    .text {
        position: absolute;
        left: 80rpx;
        top: 180rpx;
        display: flex;
        flex-direction: column;
        align-items: left;
        .title {
            font-size: 48rpx;
            font-weight: 600;
            margin-bottom: 20rpx;
            letter-spacing: 4rpx;
        }
        .title_one {
            font-size: 26rpx;
            text-align: left;
        }
    }
}
.content {
    width: 750rpx;
    min-height: 100vh;
    padding: 6rpx;
    font-size: 32rpx;
    text-align: center;
    background-color: rgba(244, 248, 251, 1);
    .box {
        width: 750rpx;
        margin: 0 auto;
        background-image: linear-gradient(#e6f4fe, #f4f8fb);
        padding-bottom: 20rpx;
        border-radius: 12rpx;
        position: relative;
        top: -70rpx;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        .input_box {
            width: 700rpx;
            padding-bottom: 30rpx;
            display: flex;
            align-items: center;
            .input {
                flex: 1;
                height: 80rpx;
                margin: 60rpx 0;
                background-color: #fff;
                border-radius: 43rpx;
                border: #e9e9e9 solid 1rpx;
            }
            ::v-deep .is-input-border {
                border-radius: 40rpx;
            }
            .search {
                width: 120rpx;
                height: 68rpx;
                margin: 0rpx 16rpx;
                background-color: rgba(62, 134, 227, 1);
                font-size: 36rpx;
                text-align: center;
                line-height: 64rpx;
                border-radius: 12rpx;
            }
        }

        .all {
            width: 340rpx;
            height: 160rpx;
            padding: 30rpx;
            background-color: #fff;
            margin-bottom: 20rpx;
            border-radius: 12rpx;
            display: flex;
            align-items: center;
            .left {
            }
            .center {
                flex: 1;
                display: flex;
                flex-direction: column;
                view {
                    font-size: 40rpx;
                    color: #000;
                }
                text {
                    font-size: 24rpx;
                    color: #999;
                }
            }
            .right {
            }
        }
    }
    .urgency {
        width: 700rpx;
        margin: 25rpx;
        min-height: 100rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        top: -60rpx;
        padding-bottom: 100rpx;
        .box_top {
            font-size: 36rpx;
            margin: 30rpx 0;
        }
        .item_indent {
            width: 700rpx;
            height: 194rpx;
            border-radius: 10rpx;
            display: flex;
            flex-direction: column;
            align-items: self-start;
            font-size: 24rpx;
            background-color: #fff;
            border-radius: 12rpx;
            padding: 20rpx;
            margin-bottom: 20rpx;
            .one {
                color: #049de0;
                padding: 6rpx 12rpx;
                border-radius: 6rpx;
                background-color: rgba(4, 157, 224, 0.2);
            }
            .tow {
                width: 100%;
                margin: 12rpx 0;
                font-size: 32rpx;
                display: flex;
                justify-content: space-between;

                .cen {
                    flex: 1;
                    text-align: right;
                    color: #fff;

                    text {
                        background-color: red;
                        padding: 6rpx 20rpx;
                        border-radius: 12rpx;
                        font-size: 24rpx;
                    }
                }
                .jiant {
                    width: 40rpx;
                    height: 40rpx;
                }
            }
            .three {
                width: 100%;
                padding: 10rpx;
                display: flex;
                justify-content: space-between;
                background-color: rgba(191, 236, 251, 0.3);
                border-radius: 6rpx;
                .item {
                    color: #66899e;
                    text {
                        color: #000;
                    }
                }
            }
        }
    }
}
</style>
